<template>
    <div>
        <div class="title">基本信息</div>
        <div class="companyse_time">
            <div class="l" style="border-right: none">
                <img src="../../assets/image/容器(1).png" alt="" />
                <span>开通时间：{{ elemsg.eleProductOpenTime }}</span>
                <div class="ykttag" v-if="elemsg.isOpenEleSign === 1">
                    已开通
                </div>
            </div>
        </div>
        <div class="msgtable">
            <div class="table-list">
                <div class="tr">
                    <div class="td">所属销售：</div>
                    <div class="td td_content">{{ elemsg.eleSaleName }}</div>
                    <div class="td">账户余额：</div>
                    <div
                        class="td td_content"
                        style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        "
                    >
                        <span
                            >￥{{
                                elemsg.eleAmount ? elemsg.eleAmount : '--'
                            }}</span
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="title">投保审核</div>
        <div class="flexbox">
            <div class="filterbox">
                <div class="lable">派遣单位：</div>
                <div class="lablecontent">
                    <el-input
                        placeholder="请输入派遣单位"
                        style="width: 300px"
                        v-model="daydispatchingagency"
                        clearable
                        @input="changedaydispatchingagency"
                    ></el-input>
                </div>
            </div>
        </div>
        <div class="flexbox">
            <div class="filterbox">
                <div class="lable">保险状态：</div>
                <div>
                    <el-radio-group
                        style="margin-top: 16px"
                        v-model="daycheckstatus"
                        @change="getdayinsurecompanylist"
                    >
                        <el-radio label="" size="large">全部 </el-radio>
                        <el-radio label="3" size="large">待审核 </el-radio>
                        <el-radio label="1" size="large">已通过 </el-radio>
                        <el-radio label="2" size="large">已驳回 </el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <div class="accounttable">
            <div
                class="tableborder"
                style="border: 1px solid #eaeaef; border-bottom: none"
            >
                <el-table
                    :data="htjllist"
                    style="width: 100%"
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
                >
                    <el-table-column
                        prop="serveCompanyName"
                        min-width="200"
                        label="派遣单位"
                    />
                    <el-table-column prop="userName" label="状态">
                    </el-table-column>
                    <el-table-column
                        min-width="150"
                        prop="idCardNo"
                        label="负责人"
                    />
                    <el-table-column
                        min-width="170"
                        prop="flowName"
                        label="手机号"
                    />
                    <el-table-column
                        min-width="100"
                        prop="labourCost"
                        label="图片视频"
                    />
                    <el-table-column
                        min-width="180"
                        prop="createOn"
                        label="行业名称"
                    >
                    </el-table-column>
                    <el-table-column
                        min-width="180"
                        prop="deadline"
                        label="地区"
                    >
                    </el-table-column>
                </el-table>
            </div>
            <div class="paginationborder">
                <pagination
                    :total="htjltotalcount"
                    :currentPage="htjlpagenum"
                    :pageSize="htjlpagesize"
                    @SizeChange="changehtjlpagesize"
                    @CurrentChange="changehtjlpagenum"
                ></pagination>
            </div>
        </div>
        <div class="title">投保记录</div>
        <div class="flexbox">
            <div class="filterbox">
                <div class="lable">投保时间：</div>
                <div>
                    <el-date-picker
                            v-model="tyrbinsuretbjldate"
                            @change="gettyrbRecordofinsurance"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            range-separator="至"
                            value-format="YYYY-MM-DD"
                        ></el-date-picker>
                </div>
            </div>
            <el-button
                type="primary"
                size="default"
                @click="exportcontracttemplate"
            >
                <el-icon>
                    <Upload />
                </el-icon>
                导出列表
            </el-button>
        </div>
        <div class="accounttable">
            <div
                class="tableborder"
                style="border: 1px solid #eaeaef; border-bottom: none"
            >
                <el-table
                    :data="htmblist"
                    style="width: 100%"
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
                >
                    <el-table-column
                        prop="templateName"
                        min-width="150"
                        label="派遣单位"
                    />
                    <el-table-column
                        prop="userName"
                        min-width="100"
                        label=" 方案名称"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        min-width="150"
                        label="投保人数"
                    />
                    <el-table-column
                        prop="createTime"
                        min-width="150"
                        label="投保日期"
                    />
                    <el-table-column
                        prop="createTime"
                        min-width="150"
                        label="金额"
                    />
                    <el-table-column
                        prop="createTime"
                        min-width="150"
                        label="费率"
                    />
                    <el-table-column
                        prop="createTime"
                        min-width="150"
                        label="操作"
                    >
                    <template #default="scope">
                        <div class="blue flexbox">
                            <div class="pointer"
                                style="margin-right:8px;padding-right:8px;border-right:1px solid #F4F4F7">导出
                            </div>
                            <div class="pointer">查看详情</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="paginationborder">
                <Pagination
                    :total="htmbtotal"
                    :currentPage="htmbpagenum"
                    :pageSize="htmbpagesize"
                    @SizeChange="changehtmbpagesize"
                    @CurrentChange="changehtmbpagenum"
                ></Pagination>
            </div>
        </div>
        <!--    修改年限弹窗   -->
        <el-dialog v-model="dialogFormVisible" title="修改年限" width="400">
            <div class="flexcenterboxc">
                <div class="lable">有效年限</div>
                <el-input-number v-model="nxnum" :min="1" />
            </div>
            <div class="flexcenterbox" style="margin-top: 20px">
                <el-button type="primary" @click="changenxsure">确定</el-button>
                <el-button @click="cancelchangenx">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {
    getqueryeleinfoapi,
    getqueryelecontractrecordapi,
    getquerycontracttemplateapi,
    updatetemplateapi,
    exportcontracttemplateapi,
    exportelesigncontractrecordapi
} from '../../api/electronicVisa/electronicVisa'
import { ElMessage, ElTable } from 'element-plus'
import { ref, reactive, computed, watch, onMounted, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Pagination from '../../components/pagination.vue'
import { shake } from '../../utils/utils'
import baseurl from '../../api/env'
const tyrbinsuretbjldate = ref<any>([])

const gettyrbRecordofinsurance = () => {
    console.log('列表')
}
const daydispatchingagency  = ref('')
const changedaydispatchingagency = ()=>{}
const daycheckstatus = ref('')
const getdayinsurecompanylist = ()=>{}
const nxnum = ref<any>(null)
const dialogFormVisible = ref(false)
const props = defineProps({
    companyId: {
        type: [String, Number],
        required: true,
        default: ''
    },
    companyName: {
        type: [String],
        required: true,
        default: ''
    }
})
const exportcontracttemplate = () => {
    exportcontracttemplateapi({
        searchName: htmbname.value,
        userName: htmbcjr.value,
        queryTime: htmbtime.value,
        companyId: props.companyId,
        companyName: props.companyName
    }).then((res: any) => {
        ElMessage({
            message: '导出成功',
            type: 'success'
        })
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const exportelesigncontractrecord = () => {
    exportelesigncontractrecordapi({
        searchName: htjlname.value,
        searchFields: htjlpersonname.value,
        flowStatus: htjlstatus.value,
        createOn: htjlfqtime.value,
        deadline: htjljztime.value,
        companyId: props.companyId,
        companyName: props.companyName
    }).then((res: any) => {
        console.log(res)
        ElMessage({
            message: '导出成功',
            type: 'success'
        })
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const unit = ref('')
const mbid = ref('')
const changenxsure = () => {
    if (!nxnum.value) {
        ElMessage({
            message: '请输入年限',
            type: 'warning'
        })
        return
    }
    updatetemplateapi({
        effectiveTime: nxnum.value,
        unit: unit.value,
        id: mbid.value,
        companyId: props.companyId
    }).then((res: any) => {
        console.log(res, '年限')
        if (res.code === 200) {
            unit.value = ''
            mbid.value = ''
            dialogFormVisible.value = false
            getquerycontracttemplatefn()
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
        }
    })
}
const cancelchangenx = () => {
    dialogFormVisible.value = false
    nxnum.value = null
    unit.value = ''
    mbid.value = ''
}
const changenx = (val: any) => {
    console.log(val)
    dialogFormVisible.value = true
    unit.value = val.unit
    mbid.value = val.id
}
const htmbtime = ref('')
const htmbcjr = ref('')
const htmbname = ref('')
const handleSelectionChangehtmb = (val: any) => {
    console.log(val)
}
const changehtmbpagenum = (val: any) => {
    htmbpagenum.value = val
    getquerycontracttemplatefn()
}
const changehtmbpagesize = (val: any) => {
    htmbpagesize.value = val
    htmbpagenum.value = 1
    getquerycontracttemplatefn()
}
const htmbpagesize = ref(10)
const htmbpagenum = ref(1)
const htmbtotal = ref(0)
const htmblist = ref<any>([])
const changehtmbcjr = () => {
    shake(getquerycontracttemplatefn, 400)
}
const changehtmbname = () => {
    shake(getquerycontracttemplatefn, 400)
}
const getquerycontracttemplatefn = () => {
    getquerycontracttemplateapi({
        searchName: htmbname.value,
        userName: htmbcjr.value,
        queryTime: htmbtime.value,
        companyId: props.companyId,
        pageSize: htmbpagesize.value,
        pageNum: htmbpagenum.value
    }).then((res: any) => {
        console.log(res, '合同模板')
        htmbtotal.value = res.totalCount
        htmblist.value = res.list
    })
}
const handleSelectionChange = (val: any) => {
    console.log(val, 'vsugh')
}
const router = useRouter()
const route = useRoute()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleTableRef2 = ref<InstanceType<typeof ElTable>>()
const changehtname = (val: any) => {
    console.log(val)
    shake(getqueryelecontractrecordfn, 400)
}
const changehtpersonname = (val: any) => {
    console.log(val)
    shake(getqueryelecontractrecordfn, 400)
}
// onMounted(()=>{
//   getqueryelecontractrecordfn()
// })
const getqueryelecontractrecordfn = () => {
    getqueryelecontractrecordapi({
        searchName: htjlname.value,
        searchFields: htjlpersonname.value,
        flowStatus: htjlstatus.value,
        createOn: htjlfqtime.value,
        deadline: htjljztime.value,
        companyId: props.companyId,
        pageSize: htjlpagesize.value,
        pageNum: htjlpagenum.value
    }).then((res: any) => {
        console.log(res, '合同记录')
        htjltotalcount.value = res.totalCount
        htjllist.value = res.list
    })
}
const htjllist = ref<any>([])
const htjltotalcount = ref(0)
const htjlpagesize = ref(10)
const htjlpagenum = ref(1)
const qsstatuslist = ref<any>([
    { label: '全部', value: '' },
    { label: '待签署', value: 'INIT' },
    { label: '已签署', value: 'ALL' },
    { label: '流签', value: 'DEADLINE' },
    { label: '拒签', value: 'REJECT' },
    { label: '撤销', value: 'CANCEL' }
])
const htjlname = ref('')
const htjlpersonname = ref('')
const htjlstatus = ref('')
const htjlfqtime = ref('')
const htjljztime = ref('')
const changehtjlpagenum = (val: any) => {
    htjlpagenum.value = val
    getqueryelecontractrecordfn()
}
const changehtjlpagesize = (val: any) => {
    htjlpagesize.value = val
    htjlpagenum.value = 1
    getqueryelecontractrecordfn()
}
const getqueryeleinfofn = () => {
    getqueryeleinfoapi({
        companyId: props.companyId
    }).then((res: any) => {
        console.log(res, '电子签基本信息')
        elemsg.value = res
    })
}
const elemsg = ref<any>({})
watch(
    () => props.companyId,
    (newval) => {
        console.log(444444, newval)
        getqueryeleinfofn()
        getqueryelecontractrecordfn()
        getquerycontracttemplatefn()
    }
)
</script>

<style scoped lang="scss">
.accounttable {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 32px;
}

.flexend {
    display: flex;
    align-items: flex-end;
    justify-content: end;
}

.filterbox {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    .lable {
        width: 80px;
        font-size: 14px;
        color: #202536;
    }

    .lablecontent {
        width: 200px;
        flex-shrink: 0;
        margin-left: 8px;
        margin-right: 20px;
        display: flex;
        justify-content: end;
    }
}

.flexbox {
    padding: 0 12px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blue {
    color: #3e5ff5;
}

.pointer {
    cursor: pointer;
}

.msgtable {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 0 12px;

    .table-list {
        border-top: 1px solid #eaeaef;
        border-left: 1px solid #eaeaef;

        .tr {
            width: 100%;
            box-sizing: border-box;
            height: 38px;
            line-height: 38px;
            display: flex;

            .td {
                height: 100%;
                box-sizing: border-box;
                padding: 0 16px;
                width: 20%;
                background: #fafafc;
                border-right: 1px solid #eaeaef;
                border-bottom: 1px solid #eaeaef;
            }

            .td_content {
                background-color: #ffffff;
                width: 30%;
            }

            .maxcontent {
                width: 80%;
                background-color: #ffffff;
            }
        }
    }
}

.title {
    display: flex;
    background: #fafafc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    display: flex;
    align-items: center;
    margin-bottom: 13px;
    padding: 0 12px;
    font-size: 14px;
    color: #3d3d3d;
}

.companyse_time {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;

    .l {
        padding-right: 20px;
        border-right: 2px solid rgba(216, 216, 216, 1);
        display: flex;
        align-items: center;

        img {
            margin-right: 10px;
        }
    }

    .r {
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        align-items: center;

        img {
            margin-right: 10px;
        }
    }
}

.mytag {
    text-align: center;
    font-size: 12px;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 2px 4px;
}

.mybluetag {
    background: rgba(80, 122, 252, 0.3);
    color: rgba(2, 86, 255, 1);
}

.mygreentag {
    background: rgba(229, 250, 241, 1);
    color: rgba(0, 214, 121, 1);
}

.myredtag {
    background: rgba(255, 220, 216, 1);
    color: rgba(234, 0, 0, 1);
}

.mygraytag {
    background: rgba(244, 244, 247, 1);
    color: rgba(148, 151, 177, 1);
}

.flexcenterboxc {
    display: flex;
    align-items: center;

    .lable {
        font-size: 14px;
        color: black;
        margin-right: 14px;
    }
}

.ykttag {
    display: inline-block;
    background-color: #e0eaff;
    color: #0256ff;
    box-sizing: border-box;
    border-radius: 2px;
    margin-left: 8px;
    padding: 3px 5px;
    font-size: 12px;
}

.ykttagc {
    background-color: #e0eaff;
    color: #0256ff;
    box-sizing: border-box;
    border-radius: 2px;
    margin-left: 8px;
    height: 20px;
    line-height: 14px;
    padding: 3px 5px;
    font-size: 12px;
}
.myflex {
    display: flex;
    align-items: center;
}
</style>
